<template>
	<page-loading :show="dataObj">
		<view class="container" v-if="dataObj">
			<view class="header">
				<view class="flexWrap">
					<view class="width-40">
						<i-icon icon="icondingdandengdai" class="mr-10 middle" type="single" size="34rpx" color="#555"></i-icon>
						<text class="font-32 font-blod">{{ offerCountList[dataObj.offerCount] }}</text>
					</view>
					<view class="width-60 u-text-right"></view>
				</view>
			</view>
			<view class="boxS mart40f">
				<view class="border-bottom-1 pad-t-b-10 font-28 color-333">寻车方信息</view>
				<view class="mt-10">
					<view class="font-26 color-333">
						{{ dataObj.store_Name }}
						<i-icon icon="iconmendianrenzheng" class="ml-10" type="single" size="30rpx" color="#60C534"></i-icon>
						<i-icon icon="iconbao_1" class="ml-10" type="single" size="30rpx" color="#FCD31F"></i-icon>
					</view>
					<view class="flex mt-10">
						<view class="width-20">
							{{ gethideshow(dataObj.truename, 'name') }}
							<i-icon icon="iconshenfenrenzheng" class="ml-10" type="single" size="40rpx" color="#60C534"></i-icon>
						</view>
						<view class="width-40">{{ gethideshow(dataObj.mobile, 'phone') }}</view>
						<view class="width-40 font-24 color-999 u-text-right">报价后可见联系方式</view>
					</view>
				</view>
			</view>
			<view class="boxS mt-20  font-26">
				<view class="border-bottom-1 pad-t-b-10 font-28 color-333">车型信息</view>
				<view class="mt-10 list flex">
					<view class="width-20 color-999">车型：</view>
					<view class="width-75 color-333">{{ dataObj.specificationName }}{{ dataObj.branb_name }} {{ dataObj.car_type_name }} {{ dataObj.car_name }}</view>
				</view>
				<view class="mt-10 list flex">
					<view class="width-20 color-999">指导价：</view>
					<view class="width-75 color-333">{{ dataObj.price }}</view>
				</view>

				<view class="mt-10 list flex">
					<view class="width-20 color-999">发布日期：</view>
					<view class="width-75 color-333">{{ dataObj.addTime }}</view>
				</view>

				<view class="mt-10 list flex">
					<view class="width-20 color-999">有效期：</view>
					<view class="width-75 color-333"><u-count-down separator-size="26" font-size="26" :timestamp="dataObj.betweenTime" separator="zh"></u-count-down></view>
				</view>

				<view class="mt-10 list flex">
					<view class="width-20 color-999">外观/内饰：</view>
					<view class="width-75 color-333">
						<view v-for="(color, ind) in dataObj.facade_pictureList" :key="ind">
							<view class="flex-jc-sb width-100 color-333" v-if="color.outerColour && color.inColour">
								<view :style="{ background: color.outerColour.colorCoding }" class="iconcolor"></view>
								{{ color.outerColour.color }}/{{ color.inColour.color }}
								<view v-if="color.inColour.neiColor.length == 1" :style="{ background: color.inColour.colorCoding }" class="iconcolor"></view>
								<view v-else class="iconcolor"><view class="iconcolor2" v-for="(it, i) in color.inColour.neiColor" :key="i" :style="{ background: it }"></view></view>
							</view>
						</view>
					</view>
				</view>

				<view class="mt-10 list flex">
					<view class="width-20 color-999">上牌地点：</view>
					<view class="width-75 color-333">{{ dataObj.goods_region_name }}</view>
				</view>

				<view class="mt-10 list flex">
					<view class="width-20 color-999">区域要求：</view>
					<view class="width-75 color-333">{{ dataObj.region_limit_name }}</view>
				</view>

				<view class="mt-10 list flex">
					<view class="width-20 color-999">手续：</view>
					<view class="width-75 color-333">{{ dataObj.procedurName }}</view>
				</view>
				<view class="mt-10 list flex">
					<view class="width-20 color-999">车辆详情：</view>
					<view class="width-75 color-333">{{ dataObj.car_descriptionName }}</view>
				</view>
				<view class="mt-10 list flex border-bottom0">
					<view class="width-20 color-999">备注信息：</view>
					<view class="width-75 color-333">{{ dataObj.remark }}</view>
				</view>
			</view>
			<!-- 寻车详情 按钮为我要报价-->
			<template v-if="type === '1'">
				<view class="nobgwrap mt-20">
					<text class="color-EB5B01">{{ dataObj.views ? dataObj.views : 0 }}次</text>
					浏览/
					<text class="color-EB5B01">{{ dataObj.findBoffList.length }}家</text>
					供应商参与报价
				</view>
				<view class="boxS mt-20" v-if="dataObj.findBoffList.length > 0">
					<view
						class="flex line70 pad-t-b-10"
						v-for="(it, index) in dataObj.findBoffList"
						:key="index"
						:class="index === dataObj.findBoffList.length - 1 ? 'border-bottom-0' : 'border-bottom-1'"
					>
						<view class="headimg"><image src="../../static/img/accessory/success.png" class="width-100" mode="widthFix"></image></view>
						<view class="width-20 s-line-text">{{ it.store_Name }}</view>
						<view class="width-20">参与报价</view>
						<view class="width-40 u-text-right">{{ backTime(it.addTime) }}</view>
					</view>
					<view class="u-text-center pad-t-b-20" v-if="dataObj.findBoffList.length > 3">收起</view>
				</view>
				<view class="pad-t-b-20" v-if="dataObj.findBoffList.length > 0 && dataObj.findBoffList.length < 3"><u-divider bg-color="#f5f5f5">没有更多报价了</u-divider></view>
				<view class="fixedBottomBtn">
					<view class="btn-bg-yellow" @click="setQuotation">
						<view class="font-30 color-333 font-blod line1 mt-10">我要报价</view>
						<view class="font-24 color-666">报价后可见寻车方联系方式</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="boxS mt-20  font-28">
					<view class="border-bottom-1 pad-t-b-10 font-28 color-333">我的报价信息</view>
					<view class="mt-10 list flex">
						<view class="width-25 color-999">车型：</view>
						<view class="width-75 color-333 u-text-right">{{ dataObj.specificationName }}{{ dataObj.branb_name }} {{ dataObj.car_type_name }} {{ dataObj.car_name }}</view>
					</view>
					<view class="mt-10 list flex">
						<view class="width-25 color-999">我的报价：</view>
						<view
							class="width-70 color-333 u-text-right"
							@click="
								keystatus = !keystatus;
								keys = 1;
							"
						>
							<!-- :tooltip='false' :dot-enabled='false' -->
							<!-- <input type="number" placeholder-class="font-28" class="u-text-right color-333 font-28" placeholder="请输入金额" v-model="myquotation" /> -->
							<text :class="myquotation ? 'color-333' : 'color-999'">{{ myquotation ? myquotation : '请输入金额' }}</text>
						</view>
						<view class="width-5">元</view>
					</view>
					<view class="mt-10 list flex">
						<view class="width-25 color-999">定金：</view>
						<view
							class="width-70 color-333 u-text-right"
							@click="
								keystatus = !keystatus;
								keys = 2;
							"
						>
							<!-- <input type="number" placeholder-class="font-28" class="u-text-right color-333 font-28" placeholder="请输入金额" @blur="blurMoney" :value="myDeposit"  /> -->
							<text :class="myDeposit ? 'color-333' : 'color-999'">{{ myDeposit ? myDeposit : '请输入金额(定金不低于800)' }}</text>
						</view>
						<view class="width-5">元</view>
					</view>
					<view class="mt-10 list flex">
						<view class="width-25 color-999">报价有效期：</view>
						<view class="width-70 color-333 u-text-right" @tap="quotationDateStatus = true">{{ quotationDate ? quotationDate : '请选择' }}</view>
						<view class="width-5"><i-icon icon="iconfanhui" class="ml-10 rotate180" type="single" size="30rpx" color="#999"></i-icon></view>
					</view>
					<view class="mt-10 list flex">
						<view class="width-25 color-999">车源所在地：</view>
						<view class="width-70 color-333 u-text-right" @click="Listingaddress('3')">{{ carAdress.address ? carAdress.address : '请选择地区' }}</view>
						<view class="width-5" @click="Listingaddress('3')"><i-icon icon="iconfanhui" class="ml-10 rotate180" type="single" size="30rpx" color="#999"></i-icon></view>
					</view>
					<view class="mt-10 list flex">
						<view class="width-25 color-999">报价联系人：</view>
						<view class="width-70 color-333 u-text-right" @click="chooseContact">{{ saleMsg.name ? saleMsg.name : '请选择' }} {{ saleMsg.phone ? saleMsg.phone : '' }}</view>
						<view class="width-5"><i-icon icon="iconfanhui" class="ml-10 rotate180" type="single" size="30rpx" color="#999"></i-icon></view>
					</view>
					<view class="mt-10 list flex">
						<view class="width-25 color-999">手续：</view>
						<view class="width-70 color-333 u-text-right" @click="formalitiesStatus = true">{{ formalitiesValue.label ? formalitiesValue.label : '请选择' }}</view>
						<view class="width-5"><i-icon icon="iconfanhui" class="ml-10 rotate180" type="single" size="30rpx" color="#999"></i-icon></view>
					</view>
					<view class="mt-10 list flex">
						<view class="width-25 color-999">车辆详情：</view>
						<view class="width-70 color-333 u-text-right" @click="carDetailStatus = true">{{ carDetail.label ? carDetail.label : '请选择' }}</view>
						<view class="width-5" @click="carDetailStatus = true"><i-icon icon="iconfanhui" class="ml-10 rotate180" type="single" size="30rpx" color="#999"></i-icon></view>
					</view>
					<view class="mt-10 list flex">
						<view class="width-25 color-999">销售区域：</view>
						<view class="width-70 color-333 u-text-right" @click="Listingaddress('4')">{{ salesArea.address ? salesArea.address : '请选择地区' }}</view>
						<view class="width-5" @click="Listingaddress('4')"><i-icon icon="iconfanhui" class="ml-10 rotate180" type="single" size="30rpx" color="#999"></i-icon></view>
					</view>
					<view class="mt-10 list flex">
						<view class="width-25 color-999">生产日期：</view>
						<view class="width-70 color-333 u-text-right" @tap="productionDateStatus = true">{{ productionDate ? productionDate : '请选择' }}</view>
						<view class="width-5"><i-icon icon="iconfanhui" class="ml-10 rotate180" type="single" size="30rpx" color="#999"></i-icon></view>
					</view>
					<view class="mt-10 list flex border-bottom0">
						<view class="width-25 color-999 mt-10">备注信息：</view>
						<view class="width-75 color-333 u-text-right">
							<u-input v-model="addRemark" type="textarea" placeholder="请输入备注信息" :border="false" :height="100" :auto-height="true" />
						</view>
					</view>
				</view>
				<view class="fixedBottomBtn">
					<view class="btn-bg-yellow ">
						<view class="font-30 color-333 font-blod line1 mt-10" @click="$u.throttle(AddCarQuotedPrice, 500)">完成报价</view>
						<view class="font-24 color-666">报价后可见寻车方联系方式</view>
					</view>
				</view>
			</template>
			<ctime title="报价有效期" :showsc="quotationDateStatus" @confirmTime="confirmQuotationDate" @closeTime="quotationDateStatus = false"></ctime>
			<ctime title="生产日期" :showsc="productionDateStatus" @confirmTime="confirmQuotationDate" @closeTime="productionDateStatus = false"></ctime>
			<formalitles :status="formalitiesStatus" :id="formalitiesValue.value" @getFormalties="getFormalties"></formalitles>
			<!-- 选择车辆详情-->
			<carDetail :status="carDetailStatus" :id="carDetail.value" @getCarDetail="selectCarDetail"></carDetail>
			<template v-if="success">
				<u-mask :show="success" class="width-100" @click="close">
					<view class="successPopup">
						<view class="popupImg"><image src="/static/img/accessory/success.png" mode=""></image></view>
						<view class="u-text-center font-30 color-333">报价提交成功</view>
						<view class="u-text-center font-24 color-999 pad-t-b-20">报价成功，等待买方查看</view>
						<view class="u-text-center mt-20"><button type="default" class="btn-bg-yellow" @click="close">我知道了</button></view>
					</view>
				</u-mask>
			</template>
			<u-keyboard ref="uKeyboard" mode="number" :mask-close-able="false" v-model="keystatus" @confirm="blurMoney" @backspace="backspace" @change="getmyquotation"></u-keyboard>
		</view>
	</page-loading>
</template>

<script src="./noQuotationForFindCar.js"></script>
<style lang="scss" scoped>
@import './noQuotationForFindCar.scss';
@import '../style/common.scss';
</style>
